<script setup lang="ts">
import LeftTop from '../../components/Deteciton/LeftTop.vue'
import LeftBottom from '../../components/Deteciton/LeftBottom.vue'
import RightTop from '../../components/Deteciton/RightTop.vue'
import RightBottom from '../../components/Deteciton/RightBottom.vue'
import autofit from 'autofit.js'
import { reactive, ref, onMounted } from 'vue'
let menuList = reactive([
    {
        url: '',
        img: '/src/assets/image/重点车辆监管系统_nor.png',
        img2: '/src/assets/image/重点车辆监管系统_hov.png',
        title: '重点车辆监管系统11'
    },
    {
        url: '',
        img: '/src/assets/image/非机动车未带头盔识别系统_nor.png',
        img2: '/src/assets/image/非机动车未带头盔识别系统_hov.png',
        title: '非机动车未带头盔识别系统'
    },
    {
        url: '',
        img: '/src/assets/image/交通安全画像系统_nor.png',
        img2: '/src/assets/image/交通安全画像系统_hov.png',
        title: '交通安全画像系统'
    },
    {
        url: '',
        img: '/src/assets/image/交通态势监控系统_nor.png',
        img2: '/src/assets/image/交通态势监控系统_hov.png',
        title: '交通态势监控系统'
    },
    {
        url: '',
        img: '/src/assets/image/可视化作战平台_nor.png',
        img2: '/src/assets/image/可视化作战平台_hov.png',
        title: '可视化作战平台'
    },
    {
        url: '',
        img: '/src/assets/image/重点车辆监管系统_nor.png',
        img2: '/src/assets/image/重点车辆监管系统_hov.png',
        title: '重点车辆监管系统'
    }
]);
let isFlag: any = ref(false);
let active = ref(9);

//   方法

// 鼠标进入
const mousemove = (v, i) => {
    isFlag.value = true;
    active.value = i;
}
// 鼠标移除
const mouseleave = (v, i) => {
    isFlag.value = false;
    active.value = null;
    // console.log(v);
}
// 点击旋转的盒子时触发的事件
const tabFun = (v, i) => {
    alert(`您点击了${v.title}`)
}
onMounted(() => {
    const items = document.querySelectorAll('.ball');
    for (let i = 0; i < items.length; i++) {
        console.log(i);
        items[i].style['animation-delay'] =
            -5 - 3.3 * i + 's,' + -3.3 * i + 's,' + -3.3 * i + 's';
    }
})
onMounted(() => {
    //页面自适应
    autofit.init({
        dh: 1080,
        dw: 1920,
        el: "body",
        resize: true
    })
})
</script>

<template>
    <AutoFit id="container" className="container" designWidth="1920" designHeight="1080">
        <div class="center">
            <div class="left">
                <LeftTop />
                <LeftBottom />
            </div>
            <div class="center-main">
                <div class="center-main-borther">
                    <div class="ball" :class="isFlag ? 'active_item' : ''" v-for="(item, index) in menuList"
                        :key="index" @click="tabFun(item, index)" @mouseenter="mousemove(item, index)"
                        @mouseleave="mouseleave(item, index)">
                        <img style="width: 200px;" :src="active === index ? item.img2 : item.img" alt="">
                        <p style="font-size: 15px;">{{ item.title }}</p>
                    </div>
                </div>
            </div>
            <div class="right">
                <RightTop />
                <RightBottom />
            </div>
        </div>
    </AutoFit>
</template>

<style scoped lang="scss">
.center {
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;

    &-main {
        width: 34%;
        position: relative;
        top: 20rem;


        &-borther {
            width: 100%;
            height: 100%;
        }

        @keyframes animX {

            /* 定义关键帧动画 'animX' */
            0% {
                /* 在动画开始时 */
                left: 0px;
                /* 将left属性设置为0像素 */
            }

            100% {
                /* 在动画结束时 */
                left: 60%;
                /* 将left属性设置为容器宽度的60% */
            }
        }

        @keyframes animY {

            /* 定义关键帧动画 'animY' */
            0% {
                /* 在动画开始时 */
                top: 0px;
                /* 将top属性设置为0像素 */
            }

            100% {
                /* 在动画结束时 */
                top: 250px;
                /* 将top属性设置为250像素 */
            }
        }

        @keyframes scale {

            /* 定义关键帧动画 'scale' */
            0% {
                /* 在动画开始时 */
                transform: scale(0.6);
                /* 使用缩放将元素的大小设置为原始的60% */
                z-index: 0;
                /* 将z-index属性设置为0 */
            }

            50% {
                /* 动画进行到一半时 */
                transform: scale(1);
                /* 使用缩放将元素的大小设置为原始大小的100% */
                z-index: 3;
                /* 将z-index属性设置为3 */
            }

            100% {
                /* 在动画结束时 */
                transform: scale(0.5);
                /* 使用缩放将元素的大小设置为原始的50% */
                z-index: 0;
                /* 将z-index属性设置为0 */
            }
        }

        .ball {
            display: flex;
            flex-direction: column;
            width: 230px;
            height: 155px;
            /*background-color: #f66;*/
            position: absolute;
            font-size: 22px;
            // color:black;
            display: flex;
            align-items: center;
            justify-content: center;
            // background: yellow;
            background-size: 100% 100%;
            // webkit-background-size: 100% 100%; 是CSS中设置背景图片大小的一种方式。

            // 在这个声明中：

            // -webkit-background-size 是一个供WebKit浏览器（如Chrome、Safari等）使用的CSS属性，用于设置背景图片的大小。
            // 100% 100% 表示背景图片的宽度和高度都将被设置为其容器的100%。换句话说，背景图片将会被拉伸或压缩以填充整个背景区域，确保背景图的宽高比与容器相同。
            -webkit-background-size: 100% 100%;
            line-height: 120px;
            z-index: 3;
            /*动画执行一次所需时间*/
            animation-duration: 10s, 10s, 20s;
            /*动画以何种运行轨迹完成一个周期*/
            animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
            /*动画播放次数,无线循环播放*/
            animation-iteration-count: infinite;
            /*是否轮流反向播放动画 alternate:正向播放*/
            animation-direction: alternate;
            // 这行代码指定了要应用到元素的动画名称，分别为 animX、animY 和 scale，对应于后面定义的三个动画。
            animation-name: animX, animY, scale;

            img {
                width: 250px;
                height: 250px;
            }

            p {
                color: black;
                font-size: 25px;
            }

        }
    }

    .container {
    position: relative;
    // 缩进
    z-index: 3;
    // 这一行代码对元素进行 X 轴方向的旋转变换，使元素沿着 X 轴顺时针旋转 30 度。
    transform: rotateX(30deg);
    width: 1200px;
    height: 800px;
    top: 130px;
    left: 70px;
  }
  
  /*鼠标进入停止*/
  // .active {
  //   animation-play-state: paused;
  // }
  .active_item {
    animation-play-state: paused;
  }
}



.left {
    width: 33%;
    height: 100%;
    background-image: url('../../assets/images/Left.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 100;
}

.right {
    width: 33%;
    height: 100%;
    background-image: url('../../assets/images/Right.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 100;
}
</style>